import React, { Component } from 'react'

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

//导入react-spring组件
import { Spring } from 'react-spring'

import { API } from '../../../../utils/api'

import styles from './index.module.css'

const titleSelectStatus = {
  area: false,
  mode: false,
  price: false,
  more: false,
}

const selectedValues = {
  area: ['area', 'null'],
  mode: ['null'],
  price: ['null'],
  more: [],
}

export default class Filter extends Component {
  state = {
    //标题栏选中状态
    titleSelectStatus,
    //控制FilterMore和FilterPicker
    openType: '',
    //所有筛选数据
    filtersData: {},
    //more-筛选条件的选中值
    selectedValues,
  }

  // 点击标题高亮
  onTitleClick = (type) => {
    this.body.className = 'body-fixed'
    const { titleSelectStatus, selectedValues } = this.state
    const newTitleSelectStatus = { ...titleSelectStatus }

    Object.keys(titleSelectStatus).forEach((key) => {
      const selectedVal = selectedValues[key]
      if (key === type) {
        newTitleSelectStatus[type] = true
        return
      }
      if (
        key === 'area' &&
        (selectedVal.length !== 2 || selectedVal[0] !== 'area')
      ) {
        newTitleSelectStatus[key] = true
      } else if (key === 'mode' && selectedVal[0] !== 'null') {
        newTitleSelectStatus[key] = true
      } else if (key === 'price' && selectedVal[0] !== 'null') {
        newTitleSelectStatus[key] = true
      } else if (key === 'more' && selectedVal.length !== 0) {
        newTitleSelectStatus[key] = true
      } else {
        newTitleSelectStatus[key] = false
      }
    })
    this.setState({
      titleSelectStatus: newTitleSelectStatus,
      openType: type,
    })
  }

  //取消(关闭对话框)
  onCancel = (type) => {
    this.body.className = ''
    const { titleSelectStatus, selectedValues } = this.state
    const newTitleSelectStatus = { ...titleSelectStatus }
    const selectedVal = selectedValues[type]

    if (
      type === 'area' &&
      (selectedVal.length !== 2 || selectedVal[0] !== 'area')
    ) {
      newTitleSelectStatus[type] = true
    } else if (type === 'mode' && selectedVal[0] !== 'null') {
      newTitleSelectStatus[type] = true
    } else if (type === 'price' && selectedVal[0] !== 'null') {
      newTitleSelectStatus[type] = true
    } else if (type === 'more' && selectedVal.length !== 0) {
      newTitleSelectStatus[type] = true
    } else {
      newTitleSelectStatus[type] = false
    }

    this.setState({
      openType: '',
      titleSelectStatus: newTitleSelectStatus,
    })
  }

  //确定(关闭对话框)
  onSave = (type, value) => {
    this.body.className = ''
    const { titleSelectStatus } = this.state
    const newTitleSelectStatus = { ...titleSelectStatus }
    const selectedVal = value

    if (
      type === 'area' &&
      (selectedVal.length !== 2 || selectedVal[0] !== 'area')
    ) {
      newTitleSelectStatus[type] = true
    } else if (type === 'mode' && selectedVal[0] !== 'null') {
      newTitleSelectStatus[type] = true
    } else if (type === 'price' && selectedVal[0] !== 'null') {
      newTitleSelectStatus[type] = true
    } else if (type === 'more' && selectedVal.length !== 0) {
      newTitleSelectStatus[type] = true
    } else {
      newTitleSelectStatus[type] = false
    }

    const newSelectedValues = { ...this.state.selectedValues, [type]: value }

    const { area, mode, price, more } = newSelectedValues
    //区域键名
    const areaKey = area[0]
    //区域键值
    let areaValue = 'null'

    if (area.length === 3) {
      areaValue = area[2] !== 'null' ? area[2] : area[1]
    }

    //筛选条件数据
    const filters = {}
    //area:area的数据
    filters[areaKey] = areaValue
    //mode:mode的数据
    filters.mode = mode[0]
    //price:price的数据
    filters.price = price[0]
    //more:more的数据
    filters.more = more.join(',')

    this.props.onFilter(filters)

    this.setState({
      openType: '',
      titleSelectStatus: newTitleSelectStatus,
      selectedValues: newSelectedValues,
    })
  }

  //封装获取所有筛选条件的方法
  getFilterData = async () => {
    const { value } = JSON.parse(window.localStorage.getItem('hkzf_city'))
    const res = await API.get('/houses/condition', {
      params: {
        id: value,
      },
    })
    this.setState({
      filtersData: res.data.body,
    })
  }

  //渲染FilterPicker
  renderFilterPicker = () => {
    const { openType, selectedValues } = this.state
    if (openType !== 'area' && openType !== 'mode' && openType !== 'price')
      return null

    const { area, subway, rentType, price } = this.state.filtersData

    let data = []
    let cols = 3
    let defaultValue = selectedValues[openType]

    switch (openType) {
      case 'area':
        data = [area, subway]
        cols = 3
        break
      case 'mode':
        data = rentType
        cols = 1
        break
      case 'price':
        data = price
        cols = 1
        break
      default:
        break
    }

    return (
      <FilterPicker
        key={openType}
        onCancel={this.onCancel}
        onSave={this.onSave}
        data={data}
        cols={cols}
        type={openType}
        defaultValue={defaultValue}
      />
    )
  }

  //渲染renderFilterMore方法，渲染FilterMore组件
  renderFilterMore = () => {
    const {
      openType,
      filtersData: { roomType, oriented, floor, characteristic },
      selectedValues,
    } = this.state
    if (openType !== 'more') {
      return null
    }

    const data = { roomType, oriented, floor, characteristic }

    const dafaultValue = selectedValues.more

    return (
      <FilterMore
        data={data}
        type={openType}
        onSave={this.onSave}
        dafaultValue={dafaultValue}
        onCancel={this.onCancel}
      />
    )
  }

  componentDidMount() {
    this.body = document.getElementsByTagName('body')[0]
    this.getFilterData()
  }

  render() {
    const { titleSelectStatus, openType } = this.state
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {openType === 'area' || openType === 'mode' || openType === 'price' ? (
          <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
            {(props) => {
              return (
                <div
                  style={props}
                  className={styles.mask}
                  onClick={() => this.onCancel(openType)}
                />
              )
            }}
          </Spring>
        ) : null}

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle
            titleSelectStatus={titleSelectStatus}
            onClick={this.onTitleClick}
          />

          {/* 前三个菜单对应的内容： */}
          {this.renderFilterPicker()}

          {/* 最后一个菜单对应的内容： */}
          {this.renderFilterMore()}
        </div>
      </div>
    )
  }
}
